import React, { useState } from 'react'
import { Button, Modal } from 'antd';
import style from "./Enquirenow.module.css";
import type { FormProps } from 'antd';
import { Form, Input } from 'antd';
import { Select } from 'antd';
type FieldType = {
    username?: string;
    password?: string;
    work?: string;
    btns?: string
};
// 弹框
function Enquirenow({ isModalOpen, iscancel }: { isModalOpen: any, iscancel: any }) {

    const [btnvalue, setBtnvalue] = useState('')
    const [form] = Form.useForm();

    const handleOk = () => {
        iscancel(false);
    };

    const handleCancel = () => {
        iscancel(false);
    };

    const handleChange = (value: string) => {
        console.log(`selected ${value}`);
    };
    //提交
    const onFinish: FormProps<FieldType>['onFinish'] = (values) => {
        console.log('Success:', values);
        iscancel(false);
        form.resetFields()
        setBtnvalue('')
    };

    const onFinishFailed: FormProps<FieldType>['onFinishFailed'] = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };
    //改变btn事件
    const handleUserCountChange = (val: any) => {
        setBtnvalue(val)
        form.setFieldsValue({ work: val });
    }

    const handleBlur = async () => {
        try {
            // 手动触发表单项的验证
            await form.validateFields(['username', 'password', 'btns', 'work']);
        } catch (errorInfo) {
            // 验证失败的处理，如果需要的话
            console.log('Validation failed:', errorInfo);
        }
    };

    return (
        <div>
            <Modal
                open={isModalOpen}
                title={null}
                onCancel={handleCancel}
                // onOk={handleOk} onCancel={handleCancel}
                // okText=''
                // cancelText=''
                footer={false}
                getContainer={false}
                className={style.tan}
            >
                <div className={style.popup}>
                    <header>
                        <h3>立即申请产品试用</h3>
                        <h4>通过内容力赋能业务增长力</h4>
                    </header>
                    <main>
                        <div className={style.title}>
                            提交信息后,工作时间咨询顾问会在2小时内为您提供专属服务
                        </div>
                        <Form
                            form={form}
                            className={style.forms}
                            name="validateOnly"
                            labelCol={{ span: 8 }}
                            wrapperCol={{ span: 26 }}
                            style={{ maxWidth: 600 }}
                            layout="vertical"
                            initialValues={{ remember: true }}
                            onFinish={onFinish}
                            onFinishFailed={onFinishFailed}
                        // autoComplete="off"
                        >
                            <Form.Item<FieldType>
                                label="姓名"
                                name="username"
                                rules={[{ required: true, message: '请输入您的姓名!' }]}
                            >
                                <Input className={style.inp}
                                    onBlur={handleBlur}
                                    placeholder='请输入您的姓名' />
                            </Form.Item>

                            <Form.Item<FieldType>
                                label="手机号"
                                name="password"
                                rules={[
                                    { required: true, message: '请输入手机号码!' },
                                    // {
                                    //     pattern: /^[1][3-9][0-9]{9}$/,
                                    //     message: '请输入有效的手机号码!',
                                    // },
                                ]}
                            >
                                <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                                    <Select
                                        defaultValue="+86"
                                        style={{ width: 120, height: '40px', borderColor: '#eee' }}
                                        options={[{ value: '+86', label: '+86' },
                                        { value: '中国 +86', label: '中国 +86' },
                                        { value: '中国香港 +852', label: '中国香港 +852' }]}
                                    />
                                    <Input className={style.inp}
                                        onBlur={handleBlur}
                                        placeholder='请输入正确的手机号码' />
                                </div>
                            </Form.Item>

                            <Form.Item<FieldType>
                                label="企业名称"
                                name="btns"
                                rules={[{ required: true, message: '请输入您所在的企业名称!' }]}
                            >
                                <Input className={style.inp}
                                    onBlur={handleBlur}
                                    placeholder='请输入您所在的企业名称' />
                            </Form.Item>

                            <Form.Item<FieldType>
                                label="需要使用产品的人数"
                                name="work"
                                rules={[{ required: true, message: '需要使用产品的人数!' }]}
                            >
                                <div className={style.btns}>
                                    <button type="button"
                                        onClick={() => handleUserCountChange('单人使用')}
                                        className={btnvalue === '单人使用' ? style.active : ''}>单人使用</button>
                                    <button type="button" onClick={() => handleUserCountChange('2-20人')}
                                        className={btnvalue === '2-20人' ? style.active : ''}>2-20人</button>
                                    <button type="button" onClick={() => handleUserCountChange('20人以上')}
                                        className={btnvalue === '20人以上' ? style.active : ''}>20人以上</button>
                                </div>
                            </Form.Item>

                            <Form.Item wrapperCol={{ offset: 0, span: 26 }}>
                                <Button type="primary" htmlType="submit"
                                    className={style.btnn}
                                >
                                    提交
                                </Button>
                            </Form.Item>
                        </Form>
                    </main>
                </div>
            </Modal>
        </div>
    )
}

export default Enquirenow
